<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		/*
    Auther: Abdelrhman Said
*/

		@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		*:focus,
		*:active {
			outline: none !important;
			-webkit-tap-highlight-color: transparent;
		}

		html,
		body {
			display: grid;
			height: 100%;
			width: 100%;
			font-family: "Poppins", sans-serif;
			place-items: center;
			background: linear-gradient(315deg, #ffffff, #d7e1ec);
		}

		.wrapper {
			display: inline-flex;
			list-style: none;
		}

		.wrapper .icon {
			position: relative;
			background: #ffffff;
			border-radius: 50%;
			padding: 15px;
			margin: 10px;
			width: 50px;
			height: 50px;
			font-size: 18px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
			cursor: pointer;
			transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}

		.wrapper .tooltip {
			position: absolute;
			top: 0;
			font-size: 14px;
			background: #ffffff;
			color: #ffffff;
			padding: 5px 8px;
			border-radius: 5px;
			box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
			opacity: 0;
			pointer-events: none;
			transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}

		.wrapper .tooltip::before {
			position: absolute;
			content: "";
			height: 8px;
			width: 8px;
			background: #ffffff;
			bottom: -3px;
			left: 50%;
			transform: translate(-50%) rotate(45deg);
			transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}

		.wrapper .icon:hover .tooltip {
			top: -45px;
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		.wrapper .icon:hover span,
		.wrapper .icon:hover .tooltip {
			text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
		}

		.wrapper .facebook:hover,
		.wrapper .facebook:hover .tooltip,
		.wrapper .facebook:hover .tooltip::before {
			background: #1877F2;
			color: #ffffff;
		}

		.wrapper .twitter:hover,
		.wrapper .twitter:hover .tooltip,
		.wrapper .twitter:hover .tooltip::before {
			background: #1DA1F2;
			color: #ffffff;
		}

		.wrapper .instagram:hover,
		.wrapper .instagram:hover .tooltip,
		.wrapper .instagram:hover .tooltip::before {
			background: #E4405F;
			color: #ffffff;
		}

		.wrapper .github:hover,
		.wrapper .github:hover .tooltip,
		.wrapper .github:hover .tooltip::before {
			background: #333333;
			color: #ffffff;
		}

		.wrapper .youtube:hover,
		.wrapper .youtube:hover .tooltip,
		.wrapper .youtube:hover .tooltip::before {
			background: #CD201F;
			color: #ffffff;
		}

	</style>

</head>
<body>
<ul class="wrapper">
	<li class="icon facebook">
		<span class="tooltip">Facebook</span>
		<span><i class="fab fa-facebook-f"></i></span>
	</li>
	<li class="icon twitter">
		<span class="tooltip">Twitter</span>
		<span><i class="fab fa-twitter"></i></span>
	</li>
	<li class="icon instagram">
		<span class="tooltip">Instagram</span>
		<span><i class="fab fa-instagram"></i></span>
	</li>
	<li class="icon github">
		<span class="tooltip">Github</span>
		<span><i class="fab fa-github"></i></span>
	</li>
	<li class="icon youtube">
		<span class="tooltip">Youtube</span>
		<span><i class="fab fa-youtube"></i></span>
	</li>
</ul>

<!-- twitter -->
<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script>


</script>
</body>
</html>